<template>
  <div>
    <div style="text-align:center;font-size:20px;color:#00B5FF;">
      <p>需求信息待审核列表</p>
    </div>
    <div>
        <label>需求编号：</label>
        <Input v-model="page.action_data.number" style="width:200px"></Input>
        <label>需求标题：</label>
        <Input v-model="page.action_data.name" style="width:200px"></Input>
        <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
     </div>
    <div style="margin-top:12px;">
      <Table border :columns="demand_table.columns" :data="list"></Table>
      <Modal ref="detail" width="720" :mask-closable="false" :scrollable="false">
        <P slot="header" style="color:#f60; text-align:center">
          <Icon type="asterisk"></Icon>
          <span>标题：{{demand.title}}</span>
        </P>
        <div class="sheet" style="margin-left:20px;">
          <p style="color:#8BC34A;font-size:15px;">详细信息</p>
          <table>
            <thead>
              <tr>
                <th style="width:20%;">审核项</th>
                <th colspan="3">内容</th>
              </tr>
            </thead>
            <tr>
              <td>编号</td>
              <td colspan="3">{{demand.number}}</td>
            </tr>
            <tr>
              <td>标题</td>
              <td colspan="3">{{demand.title}}</td>
            </tr>
            <tr>
              <td>需求类别</td>
              <td colspan="3">{{demand.m_type}}</td>
            </tr>
            <tr>
              <td>所属行业</td>
              <td colspan="3">{{demand.demand_industry}}</td>
            </tr>
            <tr>
              <td>简介</td>
              <td colspan="3">{{demand.demand_content}}</td>
            </tr>
            <tr>
              <td>公司名称</td>
              <td colspan="3">{{demand.member.enterprise_name}}</td>
            </tr>
            <tr>
              <td>联系人</td>
              <td colspan="3">{{demand.demand_master}}</td>
            </tr>
            <tr>
              <td>联系电话</td>
              <td colspan="3">{{demand.demand_tele}}</td>
            </tr>
            <tr><td>联系地址</td><td colspan="3">{{demand.demand_address}}</td></tr>
            <tr><td>发布日期</td><td colspan="3">{{demand.format_create_time}}</td></tr>
            <tr><td>开始融资日期</td><td colspan="3">{{demand.demand_beginDate}}</td></tr>
            <tr>
              <td>结束融资日期</td>
              <td colspan="3">{{demand.demand_endDate}}</td>
            </tr>
            <tr>
              <td>资金</td><td>总投资(万元)：{{demand.demand_invest}}</td><td>已投资(万元)：{{demand.demand_presentInvest}}</td><td>需融资(万元)：{{demand.demand_needInvest}}</td>
            </tr>
            <tr>
              <td>融资方式</td><td colspan="3">{{demand.demand_operation}}</td>
            </tr>
            <tr>
              <td>融资用途</td><td colspan="3">{{demand.demand_use}}</td>
            </tr>
            <tr><td>抵押物</td><td colspan="3">{{demand.demand_diya}}</td></tr>
            <tr><td>备注</td><td colspan="3">{{demand.demand_remark}}</td></tr>
            <tr>
              <td>附件</td>
              <!-- 循环展示附件，并且点击可下载查看附件 -->
              <td colspan="3">
                <p v-for="(item,key) in demand.appendix">
                <a :href="item.url">{{key+1}}、{{item.name}}</a>
                </p>
              </td>
            </tr>
          </table>
        </div>
        <div slot="footer" style="text-align:center;">
          <Button type="primary" size="large"  @click="pass">审核通过</Button>
          <Button type="error" size="large"  @click="fail">审核未通过</Button>
          <div v-if="formItem.is_show" style="margin-top:10px;">
             <Form ref="refReason" :model="formItem" :rules="isEmpty" :label-width="100">
                <FormItem label="未通过原因：" prop="textarea" >
                    <Input v-model="formItem.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入审核未通过的原因"></Input>
                </FormItem> 
              </Form>
          </div>
        </div>
      </Modal>
    </div>
    <AutoPage v-model="page"></AutoPage>
  </div>
</template>
<script>
    import Page from "@/common/model/Page";
    import AutoPage from "@/common/components/AutoPage";
    import Demand from "@/common/model/Demand.js";
    import parent from "../Parent";
export default {
  extends:parent,
  components : {
    AutoPage
  },
  data () {
      const validateEmpty = (rule, value, callback) => {
            if(value.trim() == "") callback(new Error("*审核未通过原因不能是一系列空格"));
            else callback();
      }
      return {
          page : new Page("check/demand"),
          formItem:{
              is_show:false,
              textarea : ''
          },
          isEmpty:{
            textarea:[
              { required: true, message: '请输入审核未通过的原因', trigger: 'blur' },
              { validator: validateEmpty, trigger: 'blur'}
            ]
          },
          demand_table:{
              columns:[
                {
                  title: '编号',
                  render: (h ,params) => {
                    return h('div',[
                      h('strong', params.row.number)
                    ])
                  }
                },
                {
                  title: '标题',
                  render: (h ,params) => {
                    return h('div',[
                      h('strong', params.row.title)
                    ])
                  }
                },
                {
                  title: '需求类别',
                  render: (h, params) => {
                    return h('div',[
                      h('strong', params.row.m_type)
                    ])
                  }
                },
                {
                  title: '所属行业',
                  render: (h, params) => {
                    return h('div', [
                      h('strong', params.row.demand_industry)
                    ])
                  }
                },
                {
                  title: '公司名称',
                  render: (h, params) => {
                    return h('div', [
                      h('strong', params.row.member.enterprise_name)
                    ])
                  }
                },
                {
                  title: '联系人',
                  render: (h, params) => {
                    return h('div', [
                      h('strong', params.row.demand_master)
                    ])
                  }
                },
                {
                  title:'联系电话',
                  render: (h, params) => {
                    return h('div', [
                      h('strong', params.row.demand_tele)
                    ])
                  }
                },
                {
                  title:'发布时间',
                  sortable: true,
                  render: (h, params) => {
                    return h('div', [
                      h('strong', Date.formatTimeStamp(params.row.create_time))
                    ])
                  }
                },
                {
                  title:'操作', width:150, align:'center', render:(h,params)=>{
                  return h('div', [
                    h('Button', {
                      props: { type: 'primary', size: 'small' },
                      style: { marginRight: '5px',display:this.showButton("111115") },
                      on: { click: () => { this.check(params.index) } }
                  }, '审核'),
                ]);
              }}
            ],
            current: new Demand()
          }
      }
  },
  computed :{
    demand() {
      return this.demand_table.current;
    },
    list() {
      return Demand.parseList(this.page.list);
    },
  },
  methods : {
    search(){
      this.page.current_page = 1;
      this.page.getData();       
    },
    check (index) {
      this.$refs['detail'].visible = true;
      this.demand_table.current = this.list[index];
    },
    pass () {
      if(!confirm("确认通过审核？")) return;
      this.api.post('check/demand_pass', {id :this.demand_table.current.id, reason: this.formItem.textarea}, res => {
        this.$CustomMessage.success("*审核完成！");
        this.$refs['detail'].visible = false;
        this.page.getData();
      });
    },
    fail () {
      if(!this.formItem.is_show) {
        this.formItem.is_show = true;
        return;
      }
      this.$refs["refReason"].validate( valid => {
        if(!valid) return;
        this.api.post('check/demand_fail', {id :this.demand_table.current.id, reason: this.formItem.textarea }, res => {
          this.$CustomMessage.success("*审核完成！");
          this.$refs['detail'].visible = false;
          this.page.getData();
        });
      });
    }
  }
}
</script>
<style>
  .sheet p{
    margin:5px;
  }
  .sheet table {
      font-family: Verdana;
      font-weight: bold;  
      border-width: 1px;    
      width: 660px;
      border-collapse: collapse;
  }
  .sheet table thead th{        
      background-color: rgb(81, 130, 187);
      color: #fff;
      border-bottom-width: 0;
  }
  .sheet table tr {
      border-bottom-width: 0;
  }
  .sheet table td {
      border-right: solid 1px rgb(81, 130, 187);  
  }
  .sheet table tr, .sheet table th {
      border-width: 1px;
      border-style: solid;
      border-color: rgb(81, 130, 187);
  }
  .sheet table td, .sheet table th {
      padding: 5px 10px;
      font-size: 13px;
      /* font-family: Verdana;
      font-weight: bold; */
  }
</style>

